<template>
  <div class="callcar">
    <my-head title="乘车管理" :isRightClick = "true"/>
    <!-- <mu-text-field v-model="vin" placeholder="VIN" ref="vin" class='input' @keyup.enter.native=""><i class="iconfont icon-saomiao"></i></mu-text-field> -->
    <mu-container ref="container" class="loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing">
            <mu-auto-complete v-if="isShowInput" ref="begin" :data="stations" placeholder="起始站点" v-model="starStation" class="input">
                <template slot-scope="scope">
                    <mu-list-item-action>
                    <mu-avatar color="primary">
                        {{scope.item.substring(0, 1)}}
                    </mu-avatar>
                    </mu-list-item-action>
                    <mu-list-item-content v-html="scope.highlight"></mu-list-item-content>
                </template>
            </mu-auto-complete>
            
            <mu-auto-complete v-if="isShowInput" :data="stations" placeholder="目标站点" v-model="endStation" avatar class="input">
                <template slot-scope="scope">
                    <mu-list-item-action>
                    <mu-avatar color="primary">
                        {{scope.item.substring(0, 1)}}
                    </mu-avatar>
                    </mu-list-item-action>
                    <mu-list-item-content v-html="scope.highlight"></mu-list-item-content>
                </template>
            </mu-auto-complete>

            <mu-paper class="paper" :z-depth="2" v-show="isShowCard" >
                <div class="list-content">上车点：<span class="library-position">{{starStation}}</span></div>
                <div class="list-content">下车点：<span class="library-position">{{endStation}}</span></div>
                <div class="list-content">车牌：<span class="library-position">{{carCode}}</span></div>
                <div class="list-content">司机：<span class="library-position">{{driver}}</span></div>
                <div class="list-content">状态：<span class="library-position">{{busStatus}}</span></div>
            </mu-paper>

            <div class="btn">
                <mu-button large v-if="isShowAsk" color="primary" @click="callCar">申请交通车</mu-button>
                <mu-button large v-if="isShowDel" color="primary" @click="getOnCar(0)">取消乘车</mu-button>
                <mu-button large v-if="isShowDone" color="primary" @click="getOnCar(1)">确认上车</mu-button>
            </div>
        </mu-load-more>
    </mu-container>
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'callcar',
  components: {
    myHead
  },
  data () {
    return {
        stations: [],
        starStation: "",
        endStation: "",
        isShowAsk: false,
        isShowDone: false,
        isShowCard: false,
        isShowInput: false,
        isShowDel: false,
        requestOnce: true,
        isShowCarCode: false,
        carCode: '',
        driver: '',
        busStatus: '',
        refreshing: false
    }
  },
  methods: {
    refresh () {
        this.refreshing = true;
        if(this.requestOnce){
            this.requestOnce = false;
            this.oneSearch();
        }
    },
    getOnCar (flag) {
        if(this.requestOnce){
            this.requestOnce = false;
            this.common.reqData(api.app('busUpdate'), Object.assign({},this.$store.state.user,{
                content: {
                    flag: flag
                }
            }), res=>{
                this.requestOnce = true;
                console.log(res.data);
                if(res.data.status == 100){
                    if(flag == 0){
                        this.Toast.success({
                            duration: 1000,
                            mask: true,
                            message: '已取消乘车'
                        });
                    }else{
                        this.Toast.success({
                            duration: 1000,
                            mask: true,
                            message: '已上车'
                        });
                    }
                    this.starStation = this.endStation = "";
                    this.isShowDel = this.isShowDone = false;
                    this.oneSearch();
                }else{
                    // 提示
                    this.Toast({
                        message: res.data.msg
                    });
                }
            },err =>{
                this.requestOnce = true;
                console.log(err)
            });
        }
    },
    callCar () {
        if(this.starStation == ''){
            // 提示
            this.Toast({
                duration: 1000,
                mask: true,
                message: '请输入起始站点'
            });
            return false;
        }
        if(this.endStation == ''){
            // 提示
            this.Toast({
                duration: 1000,
                mask: true,
                message: '请输入目标站点'
            });
            return false;
        }
        if(this.starStation !== '' && this.endStation !== ''){
            let data = Object.assign({},this.$store.state.user,{
                content: {
                    "getOnStation": this.starStation, // 上车站点
                    "getOffStation": this.endStation // 下车站点
                }
            });
            if(this.requestOnce){
                this.requestOnce = false;
                this.common.reqData(api.app('callCarStationCreate'), data, res=>{
                    this.requestOnce = true;
                    console.log(res.data);
                    if(res.data.status == 100){
                        // 提示
                        this.Toast({
                            duration: 1000,
                            mask: true,
                            message: '申请成功'
                        });
                        this.isShowCard = this.isShowDone = this.isShowDel = true;
                        this.isShowInput = this.isShowAsk = false;
                    }else{
                        // 提示
                        this.Toast({
                            duration: 1000,
                            mask: true,
                            message: res.data.msg
                        });
                    }
                },err =>{
                    this.requestOnce = true;
                    console.log(err)
                });
            }
        }
    },
    oneSearch () {
        this.common.reqData(api.app('callCarStationQuery'), this.$store.state.user, res=>{
            console.log(res.data);
            this.refreshing = false;
            this.requestOnce = true;
            if(res.data.status == 100){
                if(res.data.content){
                    this.starStation = res.data.content.getOnStation;
                    this.endStation = res.data.content.getOffStation;
                    this.carCode = res.data.content.carCode;
                    this.driver = res.data.content.driver;
                    this.busStatus = res.data.content.busStatus;
                    this.isShowCard = this.isShowDone = this.isShowDel = true;
                    this.isShowInput = this.isShowAsk = false;
                }else{
                    this.isShowCard = this.isShowDone = this.isShowDel = false;
                    this.isShowInput = this.isShowAsk = true;
                }
            }else{

            }
        },err =>{
            this.requestOnce = true;
            console.log(err)
        });
    }
  },
  mounted () {
    // this.inputCheck();
    this.oneSearch();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.callcar{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.input{
    display: block;
    margin: 15px auto;
    width: 85%;
}
.paper, .state, .msg{
    width: 85%;
    margin: 4em auto 0;
    padding: 1.5em 0;
}
.state, .msg{
    text-align: center;
    color: red;
    font-size: 1em;
}
.list-content{
    padding: 8px 20px;
}
.library-position{
    font-size: 2.2em;
    font-weight: bold;
    color: red;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.space{
    padding: 0 20px;
}
.btn{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.btn .mu-raised-button{
  font-size: 18px;
  height: 40px;
  line-height: 40px;
}
.loadmore-content{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    top:45px;
}
.mu-load-more{
    height: 100%;
}
</style>
